<template>
	<div class="body">

		<!-- <div class="header">
			<div>
				<img @click="returnGo" src="../../assets/homeimg/滑动左.png" />
				<span>我的老师</span>
			</div>
		</div> -->

		<div class="box">
			<van-pull-refresh v-model="isLoading"  success-text="刷新成功" @refresh="onRefresh">
				<!-- <p style="height: 90px;">刷新次数: {{ count }}</p> -->
				<ul>
					<router-link tag="li" class="kc" v-for="item in arr" :key="item.name" :to="{path:'/addTeacher',query:{id:item.course_id}}">
						<p class="kcname">
							<span class="name">{{item.name}}</span>
							<span class="pinfen">
								<img src="@/assets/homeimg/形状 3 拷贝 2.png" />
								<img src="@/assets/homeimg/形状 3 拷贝 2.png" />
								<img src="@/assets/homeimg/形状 3 拷贝 2.png" />
							</span>
						</p>
						<p class="jiyi">{{item.title}}</p>
						<div class="chakan">
							<div class="left">
								<span>查看我的老师 ></span>
								<!-- <img class="jiantou" src="@/assets/homeimg/滑动右.png" alt /> -->
							</div>
							<div class="right">
								<span>已开课 ></span>
								<!-- <img class="jiantou" src="@/assets/homeimg/滑动右.png" alt /> -->
							</div>
						</div>
					</router-link>
				</ul>
			</van-pull-refresh>
		</div>

	</div>

</template>

<script>
	import mineApi from "@/api/mine";
	import {
		PullRefresh
	} from 'vant';
	export default {
		data() {
			return {
				arr: [],
				token: '',
				isLoading: false,
				// count:0
			}
		},
		created() {
			window.scrollTo(0,0)
			// if (localStorage.getItem("user")) {
			// 	var info = JSON.parse(localStorage.getItem("user"));
			// };
			// this.token = info.token;
			if(this.$route.query.token){
				this.$store.commit('SAVE_TOKEN',this.$route.query.token)
			}
			this.getList();
		},
		methods: {
			onRefresh() {
				setTimeout(() => {
					// Toast('刷新成功');
					this.isLoading = false;
					// this.count++;
				}, 1000);
			},
			returnGo() {
				// this.$router.push('/mine');
				window.webkit.messageHandlers.pageBack_js_oc.postMessage([])
			},
			getList() {
				this.$http.post('api/curriculum/myTeacher').then(res => {
					console.log(res)
					this.arr = res.data.data;
				})
				// mineApi.myTeacher({
				// 	token: this.token
				// }).then(res => {
				// 	console.log(res);
				// 	this.arr = res.data.data;
				// 	console.log(this.arr)
				// })
			},
			// detail(id){
			// 	this.$router.push()
			// }
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.body {
		color: #333333;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: rgba(250, 250, 250, 1);
		background-size: 100% 100%;
		min-height: 100vh;
	}
	.header {
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		width: 100%;
		text-align: center;
		height: 2.75rem;
		line-height: 2.75rem;
		padding-top: 1.25rem;
		border-bottom: 1px solid #dcdcdc;
		color: #333333;
		font-size: 1.25rem;
	    z-index: 99;
		img {
			width: 0.625rem;
			height: 1.125rem;
			position: absolute;
			left: 1rem;
			bottom: 0.75rem;
		}
	}
// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);

		}

	}
	::v-deep .van-pull-refresh{
		min-height: 100vh;
	}
	.box {
		width: 100%;
		flex: 1;
		// padding: 0 0.9375rem 0 0.9375rem;
		margin: 0 auto;
		min-height: 100vh;
		// margin-top: 4rem;
	}
    ul{
		margin-top: 0.625rem;
	}
	.kgde {
		width: 92vw;
		height: 9.375rem;
		margin: 0 auto;
		background: #fff;
		padding: 0 0.75rem;
		padding-top: 0.625rem;
		margin-top: 0.9375rem;
		border-radius: .3125rem;
	}

	.kc {
		width: 92vw;
		height: 107px;
		margin: 0 auto;
		background: #fff;
		padding: 0 0.75rem;
		padding-top: 0.625rem;
		margin-top: 0.9375rem;
		border-radius: .3125rem;
	}

	.kcname {
		display: flex;
		justify-content: space-between;
	}

	.name {
		color: #333333;
		font-size: 1rem;
		font-weight: bold;
	}

	.jiyi {
		color: #333333;
		font-size: 1rem;
		height: 2.5rem;
		line-height: 2.5rem;
	}

	.chakan {
		display: flex;
		justify-content: space-between;
		color: #999999;
		font-size: 0.75rem;
		height: 1.25rem;
		line-height: 1.25rem;

		.left {
			display: flex;
			color: #4695FE;
		}

		.right {
			display: flex;
			width: 5rem;
			height: 1.5rem;
			background: #FF9D5E;
			border-radius: 0.75rem;
			justify-content: center;
			line-height: 1.5rem;

			span {
				// margin-left: .9375rem;
				color: #FFFFFF
			}
		}

	}

	.jiantou {
		display: block;
		width: 0.375rem;
		height: 0.625rem;
		margin-top: .375rem;
		margin-left: .5rem;
	}

	.bord {
		width: 100%;
		border-bottom: 1px solid #dcdcdc;
		margin-top: 0.75rem;
		margin-bottom: 1rem;
	}

	.time {
		color: #999999;
		font-size: 0.75rem;

		span {
			color: #FF9D5E;
		}
	}

	.pinfen img {
		width: 1rem;
		height: 0.9375rem;
		margin: 0 0.1875rem;
	}
</style>
